{% extends "base.html" %}

{% block subtitle %}
  Editor View
{% endblock subtitle %}

{% block content %}
  <div ng-controller="EditorExploration" ng-cloak>
    <div class="container-fluid">
      <div class="oppia-content row-fluid">
           
        <div class="span12">

          <span class="pull-right" style="margin: 10px 50px 0 0">

            <button ng-hide="isPublic" type="button" ng-click="makePublic()">
              Publish
            </button>
            <img class="oppia-help" src="/images/help.png"
                 ui-jq="tooltip" ng-hide="isPublic"
                 title="Click this button to publish your exploration in the gallery, so that others can read it.">

            &nbsp;&nbsp;&nbsp;

            <button type="button" ng-click="downloadExploration()">
              Download A Copy
            </button>
            <img class="oppia-help" src="/images/help.png"
                 ui-jq="tooltip"
                 title="Download a copy of this exploration in plaintext format.">

            &nbsp;&nbsp;&nbsp;

            <button type="button" class="btn btn-danger" data-toggle="modal"
                    data-target="#deleteExplorationModal">
              Delete
            </button>
            <img class="oppia-help" src="/images/help.png"
                 ui-jq="tooltip"
                 title="Delete this exploration. Warning: this action cannot be reversed!">
          </span>

          <h3>
            <[explorationTitle]>
            <span ng-show="isPublic" class="label label-info">
              Published
            </span>
          </h3>

          <ul class="nav nav-tabs" id="editorViewTab">
            <li class="active">
              <a data-toggle="tab" href="#explorationEditor">
                Exploration Editor
              </a>
            </li>
            <li ng-show="stateId">
              <a data-toggle="tab" href="#stateEditor">
                State Editor
              </a>
            </li>
          </ul>

          <div class="tab-content">
            <div class="tab-pane active" id="explorationEditor">

              <div class="container-fluid">
                <div class="row-fluid">

                  <div class="span4">
                    {% include 'editor/editor_metadata.html' %}
                  </div>

                  <div class="span7">
                    {% include 'editor/editor_viz.html' %}
                  </div>
                </div>
              </div>
            </div>

            <div class="tab-pane" id="stateEditor" ng-cloak>

              <div class="container-fluid">
                <div class="row-fluid">
                  <div class="span5">
                    <form ng-submit="saveStateName()">
                      <h3>
                        <span class="oppia-editable-name"
                              ng-hide="activeInputData.name == 'stateName'"
                              ng-click="initializeNewActiveInput('stateName')">
                          <[stateName]>
                        </span>
                        <span ng-show="activeInputData.name == 'stateName'">
                          <input type="text" ng-model="stateName">
                          <input type="submit" value="Save">
                        </span>
                      </h3>
                    </form>
                  </div>

                  <div class="span5">
                    <div class="pull-right">
                      <span ng-show="getMode() == 'gui'">
                        Graphical Editor | 
                      </span>
                      <span ng-hide="getMode() == 'gui'">
                        <a ng-click="changeMode('gui')">Graphical Editor</a> |
                      </span>
  
                      <span ng-show="getMode() == 'text'">
                        Plaintext Editor
                        <img class="oppia-help" src="/images/help.png"
                             ui-jq="tooltip"
                             title="This is an alternative representation of the state in plaintext (YAML) format. If you are not familiar with this representation, please use the Graphical Editor to edit the state instead.">
                      </span>
                      <span ng-hide="getMode() == 'text'">
                        <a ng-click="changeMode('text')">Plaintext Editor</a>
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <div ng-view ng-cloak></div>
            </div>
          </div>
        </div>

      </div>
    </div>


    <div class="modal hide fade" id="deleteExplorationModal" ng-model="deleteExplorationModalShown">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h3 id="deleteExplorationModalLabel">Delete Exploration</h3>
      </div>
      <div class="modal-body">
        <p>
          Really delete this exploration? This action cannot be reversed.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn" ng-click="deleteExploration()">Delete</button>
        <button type="button" class="btn" data-dismiss="modal">Cancel</button>
      </div>
    </div>

    <div class="modal hide fade" id="deleteStateModal" ng-model="deleteStateModalShown">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h3 id="deleteStateModalLabel">Delete State</h3>
      </div>
      <div class="modal-body">
        <p>
          Really delete state <[getStateName(deleteStateId)]>? This action cannot be reversed.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn" ng-click="deleteState(deleteStateId)">Delete</button>
        <button type="button" class="btn" data-dismiss="modal">Cancel</button>
      </div>
    </div>

  </div>

{% endblock %}
